<template>
  <!-- v-loading="true" -->
  <div>

    <!-- <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" /> -->
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading" @pageAdd="openDialogFn('新增')">
      <template #px="{ row }">
        <el-tag>{{ row.px < 10 ? '0' + row.px : row.px }}</el-tag>
      </template>
      <template #image="{ row }">
        <el-image v-if='row.image' style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.image)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.image)]"
          :preview-teleported='true' :initial-index="4" fit="cover" />
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="openDialogFn('编辑', row)">编辑</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>



    </pageTable>

    <Dialog width="50%" top="20vh" ref="DialogRef" :title="typeText" @submit="submitForm(ruleFormRef)"
      @onclose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">

        <el-row :gutter="20">


          <el-col :span="24">
            <el-form-item label="证书名字" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="排序">
              <el-input type="number" v-model="ruleForm.px" autocomplete="off" placeholder="请输入排序号" />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item label="描述" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入描述"
                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
            </el-form-item>
          </el-col> -->








          <el-col :span="24">
            <el-form-item label="图片" prop="imagelist">
              <LTUpload v-model="ruleForm.imagelist"></LTUpload>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </Dialog>



  </div>
</template>

<script setup lang="ts">
import pageTable from "@/components/base-ui/page-table";
import Dialog from "@/components/base-ui/dialog";
import { reactive, ref, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { clone } from "@pureadmin/utils";
import { randomNumber } from '@/utils/xwCommon'
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import { getselhonorinfo, GSupdatehonor, aboutusinserthonor, aboutusdelhonorinfo } from '@/api/aboutus'
import LTUpload from '@/components/base-ui/upload'
import { tableInit } from "./config/table.config";
import { getPicImg, geturlneeddl, uploadUrl } from '@/api/upload'









const {
  exportExcel,
  tableData,
  getData,
  amendData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  addData,
  DialogRef,
  openDialog,
} = usepageTable({
  tableInit,
  getRes: getselhonorinfo,
  addRes: aboutusinserthonor,
  delRes: aboutusdelhonorinfo,
  updateRes: GSupdatehonor
})

getData()






const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  imagelist: [],
  px: '',
  image: '',
  id: ''
})




const rules = reactive<FormRules<typeof ruleForm>>({
  name: [
    { required: true, message: '请填写证书名字', trigger: 'blur' },
  ],
  imagelist: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],
})
const typeText = ref('')
const openDialogFn = (text, row) => {
  typeText.value = text
  if (row) {
    const temporary = clone(row, true);
    Object.keys(ruleForm).forEach((key) => ruleForm[key] = temporary[key])
    ruleForm.imagelist = [{
      name: '图片',
      url: getPicImg(temporary.image)
    }]
  }
  setTimeout(() => {
    openDialog()
  }, 500);
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let Q = {
        name: ruleForm.name,
        image: ruleForm.imagelist[0].response?.data?.result[0]?.uuid || ruleForm.image,
        px: ruleForm.px,
        id: ruleForm.id,
      }
      let fn = typeText.value === '新增' ? addData : amendData
      fn(Q)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.name = ''
  ruleForm.image = ''
  ruleForm.imagelist = []
  ruleForm.px = ''
  ruleForm.id = ''
}
</script>

<style scoped></style>
